<template>
	<div>
		<div v-transfer-dom>
			<popup v-model="isPopupShow" position="right" @on-hide="handleHide">
				<div class="popupDiv" style="width: 7.5rem;">
					<div class="main" ref='remove'>
						<div class="univSearchWrap">
							<scroller ref='scrollerBottom'>
								<div class="scrollerDiv">
									<div class="univSearBox">
										<div class="header">
											<span @click="goback">
												<i class="imgIcon"></i>
											</span>
										</div>
										<p>请选择排除省份</p>
									</div>
									<ul class="scrollerCheckList">
										<li v-for="(item, index) in commonList" :key="index" @click="addOrRemove(item)">
											<img class="imgIcon" src="~/static/images/search_icon_sure.png" icon-class="search_icon_sure" v-if="checklist.indexOf(item) !== -1" />
											<img class="imgIcon" src="~/static/images/search_icon_nor.png" v-else />
											<span :class="[checklist.indexOf(item) !== -1 ? 'selectColor': '']">{{item.indexOf('&')>0?item.substring(0,item.indexOf('&')):item}}</span>
										</li>
									</ul>
									<div style="width: 100%;height: 92px;"></div>
								</div>
								<div style="width: 100%;height: 92px;"></div>
							</scroller>

							<div class="footer" v-show="commonList.length > 0">
								<div class="left">
									<span class="hasChoose">已选择</span>
									<span class="selectedNum">{{ checklist.length }}</span>
									<span class="totalNum">/{{ commonList.length }}</span>
								</div>
								<div class="right" @click="submit">确定</div>
							</div>
						</div>

					</div>
				</div>
			</popup>
		</div>
	</div>
</template>

<script>
	import {
		TransferDom,
		Popup,
	} from 'vux'
	export default {
		props: {
			popupShow: Boolean,
			placeholderText: String,
			proArr: Array,
			choLists: Array,
		},
		directives: {
			TransferDom
		},
		components: {
			Popup,
		},
		data() {
			return {
				isPopupShow: false,
				commonList: [],
				checklist: [],
			};
		},
		watch: {
			// 根据传入的popupShow这个值来判断popup是否显示
			popupShow(type) {
				this.isPopupShow = type;
			},
			proArr(arr) {
				this.commonList = arr;
			},
			choLists(arr) {
				this.checklist = arr;
			}
		},
		mounted() {},
		methods: {
			handleHide() {
				this.$emit('closePopUp');
			},
			goback() {
				this.$emit('closePopUp');
			},
			addOrRemove(item) {
				if (this.checklist.indexOf(item) == -1) {
					this.checklist.push(item);
				} else {
					this.checklist = this.checklist.filter((x) => {
						return x !== item;
					})
				}
			},
			submit() {
				this.$emit('sendList', this.checklist);
			}
		}

	}
</script>

<style lang="less" scoped>
	.vux-popup-dialog {
		background: #fff;
	}

	.univSearchWrap {
		width: 7.5rem;
		min-height: 100vh;
		background: #fff;
		position: relative;



		.scrollerDiv {
			padding: 0 0.3rem 0.3rem;
			box-sizing: border-box;

			.univSearBox {
				width: 7.5rem;
				padding: 0 0.3rem;
				box-sizing: border-box;
				height: auto;

				p {
					font-size: 0.3rem;
					color: #222;
					margin-bottom: 0.1rem
				}

				.header {
					width: 100%;
					height: 0.88rem;
					line-height: 0.88rem;
					font-size: 0.3rem;

					.imgIcon {
						width: 0.4rem;
						height: 0.4rem;
						display: inline-block;
						background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -0.1rem;
						background-size:3rem 2.4rem; 

					}
				}


			}

			.describe {
				font-size: 0.26rem;
				color: #BBB;
				font-weight: bold;
				// margin-top: 0.6rem;
				margin-bottom: 0.2rem;
			}

			.scrollerCheckList /deep/ .weui-cells:before {
				border: none;
				left: 0;
			}

			.scrollerCheckList {
				list-style: none;
				padding-left: 0.3rem;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;

				li {
					display: flex;
					align-items: center;
					width: 1.8rem;
					height: 0.9rem;
					line-height: 0.9rem;
					margin-right: 0.4rem;

					.imgIcon {
						width: 0.4rem;
						height: 0.4rem;
					}

					span {
						font-size: 0.3rem;
						margin-left: 0.28rem;
						color: #222;
						letter-spacing: 0.03rem;
					}

					span.selectColor {
						color: @mainColor;
						font-weight: bold;
					}
				}
			}
		}

		.footer {
			width: 100%;
			height: 1.2rem;
			position: fixed;
			bottom: 0;
			left: 0;
			background: #fff;
			box-shadow: 0px -4px 10px 0px rgba(204, 204, 204, 0.2);
			color: #ccc;
			padding: 0 0.3rem;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				align-items: center;

				.hasChoose {
					color: #222;
					font-size: 0.26rem;
					font-weight: bold;
					margin-right: 0.2rem;
				}

				.selectedNum {
					color: @mainColor;
					font-size: 0.4rem;
					margin-right: 0.07rem;
				}

				.totalNum {
					color: #BBB;
					font-size: 0.22rem;
				}
			}

			.right {
				display: inline-block;
				width: 2rem;
				height: 0.7rem;
				line-height: 0.7rem;
				text-align: center;
				border-radius: 0.1rem;
				background: @mainColor;
				color: #fff;
				font-size: 0.36rem;
			}
		}

	}
</style>
